<template>
  <!-- 大屏通用title组件 -->
  <div class="dataScreen-title">
    <img class="title-star" src="@/assets/screenImg/headImg/itemTitleStar.gif" alt="">
    <!-- 左侧title，以背景图形式导入 -->
    <div class="title-name">
      <img :src="itemTitleImg" alt="" />
    </div>
    <!-- 右侧按钮，在父组件以插槽形式导入 -->
    <div class="title-rightBtn">
      <slot name="rightCnBox"></slot>
    </div>
  </div>
</template>
<script setup name="screenCommonTitle">
const props = defineProps({
  // title图片的url
  itemTitleImg: {
    required: true,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.dataScreen-title {
  width: 100%;
  height: 60px;
  position: relative;
  background: url("@/assets/screenImg/headImg/itemTitleBg.png") no-repeat;
  background-size: 375PX 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 10px 10px;
  .title-star {
    width: 22px;
    height: 22px;
    position: absolute;
    left: 46px;
    top: 10px;
  }
  .title-name {
    height: 38px;
    margin-left: 75PX;
    // margin-left: 10%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title-rightBtn {
    font-size: 12px;
    color: #36e3e3;
    margin-right: 50px;
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
    float: right;
    letter-spacing: 2px;
  }
}
</style>
